<template>
  <div class="store-personnel-container">
    <div class="header-buttons">
      <el-button type="primary" @click="handleAddEmployee">新增员工</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>

    <el-table :data="employeeList" stripe>
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column label="员工头像" width="100">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="员工头像" class="avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="员工姓名" />
      <el-table-column prop="role" label="员工角色" />
      <el-table-column prop="phone" label="员工电话" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleUnbindEmployee(scope.row)">解绑员工</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!-- 新增员工对话框 -->
    <el-dialog v-model="addEmployeeDialogVisible" title="新增员工">
      <div>
        <el-input v-model="searchPhone" placeholder="请输入员工电话" clearable />
        <el-button @click="searchEmployee" style="margin-top: 10px;">搜索</el-button>

        <div v-if="searchedEmployee" class="employee-card">
          <div class="employee-info">
            <img :src="searchedEmployee.avatar" alt="员工头像" class="avatar" />
            <div class="info-text">
              <div class="name">{{ searchedEmployee.name }}</div>
              <div class="phone">{{ searchedEmployee.phone }}</div>
            </div>
          </div>
        </div>

        <div v-else-if="searchPerformed && !searchedEmployee" class="no-result">
          <el-alert title="查无此人" type="warning" />
        </div>
      </div>
      <div>
        <el-button @click="addEmployeeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddEmployee" :disabled="!searchedEmployee">确定</el-button>
      </div>
    </el-dialog>

    <!-- 解绑员工确认对话框 -->
    <el-dialog :visible.sync="unbindDialogVisible" title="确认解绑">
      <template #content>
        <p>{{ unbindDialogMessage }}</p>
      </template>
      <template #footer>
        <el-button @click="unbindDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUnbindEmployee">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {ElMessage} from "element-plus";

const route = useRoute()
const router = useRouter()

// 员工列表分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const employeeList = ref([])

// 搜索相关
const searchPhone = ref('')
const searchedEmployee = ref(null)
const searchPerformed = ref(false)

// 对话框相关
const addEmployeeDialogVisible = ref(false)
const unbindDialogVisible = ref(false)
const unbindDialogMessage = ref('')
const employeeToUnbind = ref(null)

// 模拟数据
const mockEmployeeData = [
  {
    id: 1,
    name: '张三',
    role: '店长',
    phone: '13800138000',
    avatar: 'https://picsum.photos/100/100?random=1'
  },
  {
    id: 2,
    name: '李四',
    role: '技师',
    phone: '13900139000',
    avatar: 'https://picsum.photos/100/100?random=2'
  }
  // 更多员工数据...
]

const mockAllEmployees = [
  ...mockEmployeeData,
  {
    id: 3,
    name: '王五',
    role: '技师',
    phone: '13700137000',
    avatar: 'https://picsum.photos/100/100?random=3'
  },
  {
    id: 4,
    name: '赵六',
    role: '前台',
    phone: '13600136000',
    avatar: 'https://picsum.photos/100/100?random=4'
  }
]

// 页面加载时获取员工数据
onMounted(() => {
  fetchEmployeeList()
})

// 获取员工列表
const fetchEmployeeList = () => {
  // 模拟API请求延迟
  setTimeout(() => {
    // 实际项目中应该根据storeId从API获取数据
    const startIndex = (currentPage.value - 1) * pageSize.value
    const endIndex = startIndex + pageSize.value
    employeeList.value = mockEmployeeData.slice(startIndex, endIndex)
    total.value = mockEmployeeData.length
  }, 300)
}

// 分页事件处理
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  fetchEmployeeList()
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  fetchEmployeeList()
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 新增员工
const handleAddEmployee = () => {
  addEmployeeDialogVisible.value = true
  searchPhone.value = ''
  searchedEmployee.value = null
  searchPerformed.value = false
}

// 搜索员工
const searchEmployee = () => {
  if (!searchPhone.value) {
    ElMessage.error('请输入员工电话')
    return
  }

  searchPerformed.value = true

  // 模拟API请求延迟
  setTimeout(() => {
    // 实际项目中应该发送请求到API
    const foundEmployee = mockAllEmployees.find(emp => emp.phone === searchPhone.value)

    // 检查是否已在门店中
    const isAlreadyInStore = mockEmployeeData.some(emp => emp.phone === searchPhone.value)

    if (foundEmployee && !isAlreadyInStore) {
      searchedEmployee.value = foundEmployee
    } else if (isAlreadyInStore) {
      searchedEmployee.value = null
      ElMessage.error('该员工已在本门店中')
    } else {
      searchedEmployee.value = null
    }
  }, 300)
}

// 确认添加员工
const confirmAddEmployee = () => {
  if (searchedEmployee.value) {
    // 模拟API请求
    setTimeout(() => {
      // 实际项目中应该发送数据到API
      mockEmployeeData.push(searchedEmployee.value)

      fetchEmployeeList()
      addEmployeeDialogVisible.value = false

      // 显示成功消息
      ElMessage({
        type: 'success',
        message: '员工添加成功'
      })
    }, 300)
  }
}

// 解绑员工
const handleUnbindEmployee = (employee) => {
  employeeToUnbind.value = employee
  unbindDialogMessage.value = `请问是否将 ${employee.name} 解绑本门店？`
  unbindDialogVisible.value = true
}

// 确认解绑员工
const confirmUnbindEmployee = () => {
  if (employeeToUnbind.value) {
    // 模拟API请求
    setTimeout(() => {
      // 实际项目中应该发送请求到API
      const index = mockEmployeeData.findIndex(emp => emp.id === employeeToUnbind.value.id)
      if (index !== -1) {
        mockEmployeeData.splice(index, 1)
      }

      fetchEmployeeList()
      unbindDialogVisible.value = false
      employeeToUnbind.value = null

      // 显示成功消息
      ElMessage({
        type: 'success',
        message: '员工已成功解绑'
      })
    }, 300)
  }
}
</script>

<style scoped>
.store-personnel-container {
  padding: 20px;
}

.header-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.employee-card {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.employee-info {
  display: flex;
  align-items: center;
}

.info-text {
  margin-left: 15px;
}

.name {
  font-weight: bold;
}

.no-result {
  margin-top: 20px;
}
</style>
